<template>
  <div class="department">
    <!-- <department-search
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    /> -->
    <!-- <department-content
      ref="contentRef"
      @new-click="handleNewBtnClick"
      @edit-click="handleEditBtnClick"
    /> -->
    <department-search
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />
    <department-content
      :content-config="contentConfig"
      ref="contentRef"
      @new-click="handleNewBtnClick"
      @edit-click="handleEditBtnClick"
    >
      <!-- 使用插条定制内容 -->
      <template #leader="scope">
        <span class="leader">{{ scope.hName }}:哈:{{ scope.prop }}</span>
      </template>
      <template #parent="scope">
        <span class="parent">{{ scope.hName }}:呵:{{ scope.prop }}</span>
      </template>
    </department-content>
    <department-modal ref="modalRef" :modal-config="modalConfigRef"></department-modal>
  </div>
</template>

<script setup lang="ts">
import DepartmentSearch from '@/components/page-search/PageSearch.vue'
import DepartmentContent from '@/components/page-content/PageContent.vue'
import DepartmentModal from '@/components/page-modal/PageModal.vue'
import { ref } from 'vue'

import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import { computed } from 'vue'
import useMainStore from '@/store/main/main'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'

// 对modalConfig进行操作
const modalConfigRef = computed(() => {
  const mainStore = useMainStore()
  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.id }
  })
  // console.log(...departments)
  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options!.push(...departments)
    }
  })
  return modalConfig
})

const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
const { modalRef, handleNewBtnClick, handleEditBtnClick } = usePageModal()
</script>

<style lang="less" scoped>
.department {
  border-radius: 8px;
  overflow: hidden;
  .leader {
    color: red;
  }
  .parent {
    color: blue;
  }
}
</style>
